<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博沃智慧 - 系统设置</title>
    <script src="./static/vendor/js/tailwindcss-3.4.17.js"></script>
    <link rel="stylesheet" href="./static/vendor/css/font-awesome-6.4.0.all.min.css">
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8fafc;
        }

        /* 自定义滚动条 */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f5f9;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 3px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* 侧边栏动画 */
        .sidebar {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-collapsed {
            width: 64px !important;
        }
        .sidebar-expanded {
            width: 15% !important;
        }

        /* 文本淡入淡出 */
        .fade-text {
            transition: opacity 0.3s ease-in-out;
        }
        .fade-text.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* 设置项卡片 */
        .setting-card {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        .setting-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        }
        .setting-card.active {
            border-color: #667eea;
            background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
        }

        /* 头像上传区域 */
        .avatar-upload {
            position: relative;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .avatar-upload:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        .avatar-upload img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .avatar-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .avatar-upload:hover .avatar-overlay {
            opacity: 1;
        }

        /* 密码强度指示器 */
        .password-strength {
            height: 4px;
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        .strength-weak { background: #ef4444; width: 33%; }
        .strength-medium { background: #f59e0b; width: 66%; }
        .strength-strong { background: #10b981; width: 100%; }

        /* 统计卡片 */
        .stat-card {
            transition: all 0.3s ease;
        }
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(0,0,0,0.1);
        }

        /* 标签页 */
        .tab-button {
            transition: all 0.3s ease;
            position: relative;
        }
        .tab-button::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--primary-gradient);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        .tab-button.active::after {
            width: 100%;
        }

        /* 输入框焦点效果 */
        .input-focus {
            transition: all 0.3s ease;
        }
        .input-focus:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        /* 按钮动画 */
        .btn-primary {
            background: var(--primary-gradient);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
        }

        /* 开关组件 */
        .toggle-switch {
            position: relative;
            width: 48px;
            height: 24px;
            background: #d1d5db;
            border-radius: 24px;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        .toggle-switch.active {
            background: #667eea;
        }
        .toggle-switch::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s ease;
        }
        .toggle-switch.active::after {
            transform: translateX(24px);
        }

        /* 文件上传区域 */
        .upload-area {
            border: 2px dashed #d1d5db;
            transition: all 0.3s ease;
        }
        .upload-area:hover {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.05);
        }
        .upload-area.dragover {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.1);
        }

        /* 知识库项目 */
        .knowledge-item {
            transition: all 0.3s ease;
        }
        .knowledge-item:hover {
            transform: translateX(4px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        /* 加载动画 */
        .loading-dots {
            display: inline-flex;
            gap: 4px;
        }
        .loading-dots span {
            width: 6px;
            height: 6px;
            background: #667eea;
            border-radius: 50%;
            animation: loadingBounce 1.4s ease-in-out infinite both;
        }
        .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
        .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
        @keyframes loadingBounce {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

        /* 消息提示 */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            animation: slideIn 0.3s ease;
        }
        @keyframes slideIn {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }
    </style>
</head>
<body class="bg-slate-50">
    <div class="flex h-screen overflow-hidden">
        <!-- 左侧边栏 -->
        <div id="sidebar" class="sidebar sidebar-expanded bg-white shadow-xl border-r border-slate-200 flex flex-col">
            <!-- 应用标题 -->
            <div class="p-6 border-b border-slate-200">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
                            <i class="fas fa-brain text-white text-lg"></i>
                        </div>
                        <div class="fade-text">
                            <h1 class="font-bold text-xl bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">博沃智慧</h1>
                            <p class="text-xs text-slate-500">系统设置</p>
                        </div>
                    </div>
                    <button id="sidebarToggle" class="p-2 rounded-lg hover:bg-slate-100 transition-colors">
                        <i class="fas fa-bars text-slate-600"></i>
                        <i class="fas fa-chevron-left text-slate-600 hidden"></i>
                    </button>
                </div>
            </div>

            <!-- 导航菜单 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar p-4">
                <nav class="space-y-2">
                    <a href="main.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-100 transition-colors fade-text">
                        <i class="fas fa-comments text-slate-600"></i>
                        <span class="text-slate-700">对话界面</span>
                    </a>
                    <a href="settings.html" class="flex items-center space-x-3 p-3 rounded-lg bg-indigo-50 text-indigo-700 border border-indigo-200 fade-text">
                        <i class="fas fa-cog text-indigo-600"></i>
                        <span class="font-medium">系统设置</span>
                    </a>
                    <a href="knowledge.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-100 transition-colors fade-text">
                        <i class="fas fa-book text-slate-600"></i>
                        <span class="text-slate-700">知识库管理</span>
                    </a>
                    <a href="mcp-management.html" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-100 transition-colors fade-text">
                        <i class="fas fa-plug text-slate-600"></i>
                        <span class="text-slate-700">MCP管理</span>
                    </a>
                </nav>
            </div>

            <!-- 用户信息 -->
            <div class="p-4 border-t border-slate-200">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500 flex items-center justify-center shadow-lg">
                        <i class="fas fa-user text-white text-lg"></i>
                    </div>
                    <div class="fade-text flex-1">
                        <p class="font-semibold text-slate-800">张晓明</p>
                        <p class="text-xs text-slate-500">专业版用户</p>
                    </div>
                    <div class="fade-text">
                        <button class="p-2 rounded-lg hover:bg-slate-100 transition-colors" onclick="window.location.href='main.html'">
                            <i class="fas fa-sign-out-alt text-slate-600"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="flex-1 flex flex-col bg-white">
            <!-- 标题栏 -->
            <div class="bg-white border-b border-slate-200 p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-slate-800">系统设置</h1>
                        <p class="text-slate-500 mt-1">管理您的账户、偏好设置和个人知识库</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-colors">
                            <i class="fas fa-question-circle mr-2"></i>帮助
                        </button>
                    </div>
                </div>
            </div>

            <!-- 标签页导航 -->
            <div class="bg-white border-b border-slate-200 px-6">
                <div class="flex space-x-8">
                    <button class="tab-button py-4 text-sm font-medium text-slate-700 hover:text-indigo-600 active" data-tab="account">
                        <i class="fas fa-user mr-2"></i>账户设置
                    </button>
                    <button class="tab-button py-4 text-sm font-medium text-slate-700 hover:text-indigo-600" data-tab="preferences">
                        <i class="fas fa-sliders-h mr-2"></i>偏好设置
                    </button>
                    <button class="tab-button py-4 text-sm font-medium text-slate-700 hover:text-indigo-600" data-tab="statistics">
                        <i class="fas fa-chart-bar mr-2"></i>使用统计
                    </button>
                </div>
            </div>

            <!-- 设置内容 -->
            <div class="flex-1 overflow-y-auto custom-scrollbar p-6">
                <!-- 账户设置 -->
                <div id="accountTab" class="tab-content">
                    <div class="max-w-4xl mx-auto space-y-6">
                        <!-- 个人信息 -->
                        <div class="setting-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <h3 class="text-lg font-semibold text-slate-800 mb-4">个人信息</h3>
                            <div class="flex items-start space-x-6">
                                <div class="avatar-upload">
                                    <img src="https://picsum.photos/seed/user-avatar/120/120.jpg" alt="用户头像" id="avatarImage">
                                    <div class="avatar-overlay">
                                        <i class="fas fa-camera text-white text-xl"></i>
                                    </div>
                                    <input type="file" id="avatarInput" class="hidden" accept="image/*">
                                </div>
                                <div class="flex-1 space-y-4">
                                    <div class="grid grid-cols-2 gap-4">
                                        <div>
                                            <label class="block text-sm font-medium text-slate-700 mb-2">用户名</label>
                                            <input type="text" value="张晓明" class="w-full px-4 py-2 border border-slate-300 rounded-lg input-focus outline-none">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-slate-700 mb-2">邮箱</label>
                                            <input type="email" value="zhangxiaoming@example.com" class="w-full px-4 py-2 border border-slate-300 rounded-lg input-focus outline-none">
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-slate-700 mb-2">个人简介</label>
                                        <textarea rows="3" class="w-full px-4 py-2 border border-slate-300 rounded-lg input-focus outline-none resize-none" placeholder="介绍一下您自己...">数据分析师，专注于环境数据分析和可视化</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 密码修改 -->
                        <div class="setting-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <h3 class="text-lg font-semibold text-slate-800 mb-4">修改密码</h3>
                            <div class="space-y-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">当前密码</label>
                                    <div class="relative">
                                        <input type="password" id="currentPassword" class="w-full px-4 py-2 pr-10 border border-slate-300 rounded-lg input-focus outline-none" placeholder="请输入当前密码">
                                        <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-slate-600" onclick="togglePasswordVisibility('currentPassword')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">新密码</label>
                                    <div class="relative">
                                        <input type="password" id="newPassword" class="w-full px-4 py-2 pr-10 border border-slate-300 rounded-lg input-focus outline-none" placeholder="请输入新密码" onkeyup="checkPasswordStrength()">
                                        <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-slate-600" onclick="togglePasswordVisibility('newPassword')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    <div class="mt-2">
                                        <div class="password-strength" id="passwordStrengthBar"></div>
                                        <p class="text-xs text-slate-500 mt-1" id="passwordStrengthText">密码强度：未输入</p>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">确认新密码</label>
                                    <div class="relative">
                                        <input type="password" id="confirmPassword" class="w-full px-4 py-2 pr-10 border border-slate-300 rounded-lg input-focus outline-none" placeholder="请再次输入新密码">
                                        <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400 hover:text-slate-600" onclick="togglePasswordVisibility('confirmPassword')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="flex items-center space-x-4">
                                    <button onclick="updatePassword()" class="btn-primary px-6 py-2 text-white rounded-lg font-medium">
                                        <i class="fas fa-save mr-2"></i>保存密码
                                    </button>
                                    <button class="px-6 py-2 text-slate-600 hover:bg-slate-100 rounded-lg font-medium">
                                        取消
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- 安全设置 -->
                        <div class="setting-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <h3 class="text-lg font-semibold text-slate-800 mb-4">安全设置</h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-slate-800">两步验证</p>
                                        <p class="text-sm text-slate-500">为您的账户添加额外的安全保护</p>
                                    </div>
                                    <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-slate-800">会话超时</p>
                                        <p class="text-sm text-slate-500">30分钟无操作后自动退出登录</p>
                                    </div>
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 偏好设置 -->
                <div id="preferencesTab" class="tab-content hidden">
                    <div class="max-w-4xl mx-auto space-y-6">
                        <!-- 界面设置 -->
                        <div class="setting-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <h3 class="text-lg font-semibold text-slate-800 mb-4">界面设置</h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-slate-800">深色模式</p>
                                        <p class="text-sm text-slate-500">减少眼睛疲劳，适合夜间使用</p>
                                    </div>
                                    <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-slate-800">紧凑布局</p>
                                        <p class="text-sm text-slate-500">显示更多内容，减少空白空间</p>
                                    </div>
                                    <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-slate-800">消息提醒</p>
                                        <p class="text-sm text-slate-500">新消息时显示桌面通知</p>
                                    </div>
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                </div>
                            </div>
                        </div>

                        <!-- 语言设置 -->
                        <div class="setting-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <h3 class="text-lg font-semibold text-slate-800 mb-4">语言设置</h3>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">界面语言</label>
                                    <select class="w-full px-4 py-2 border border-slate-300 rounded-lg input-focus outline-none">
                                        <option value="zh-CN" selected>简体中文</option>
                                        <option value="zh-TW">繁体中文</option>
                                        <option value="en-US">English</option>
                                    </select>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-700 mb-2">模型语言</label>
                                    <select class="w-full px-4 py-2 border border-slate-300 rounded-lg input-focus outline-none">
                                        <option value="zh-CN" selected>中文</option>
                                        <option value="en-US">English</option>
                                        <option value="auto">自动检测</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- 通知设置 -->
                        <div class="setting-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <h3 class="text-lg font-semibold text-slate-800 mb-4">通知设置</h3>
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-slate-800">邮件通知</p>
                                        <p class="text-sm text-slate-500">接收重要更新和系统通知</p>
                                    </div>
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-slate-800">声音提醒</p>
                                        <p class="text-sm text-slate-500">新消息时播放提示音</p>
                                    </div>
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)"></div>
                                </div>
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="font-medium text-slate-800">桌面通知</p>
                                        <p class="text-sm text-slate-500">浏览器不在前台时显示通知</p>
                                    </div>
                                    <div class="toggle-switch" onclick="toggleSwitch(this)"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- 使用统计 -->
                <div id="statisticsTab" class="tab-content hidden">
                    <div class="max-w-6xl mx-auto space-y-6">
                        <!-- 使用概览 -->
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                            <div class="stat-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-sm text-slate-600">总对话数</p>
                                        <p class="text-2xl font-bold text-slate-800">1,234</p>
                                        <p class="text-xs text-green-600">+12.5%</p>
                                    </div>
                                    <i class="fas fa-comments text-3xl text-blue-500"></i>
                                </div>
                            </div>
                            <div class="stat-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-sm text-slate-600">本月活跃</p>
                                        <p class="text-2xl font-bold text-slate-800">89</p>
                                        <p class="text-xs text-green-600">+8.3%</p>
                                    </div>
                                    <i class="fas fa-calendar-check text-3xl text-green-500"></i>
                                </div>
                            </div>
                            <div class="stat-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-sm text-slate-600">Token使用</p>
                                        <p class="text-2xl font-bold text-slate-800">45.6K</p>
                                        <p class="text-xs text-red-600">+23.1%</p>
                                    </div>
                                    <i class="fas fa-coins text-3xl text-yellow-500"></i>
                                </div>
                            </div>
                            <div class="stat-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-sm text-slate-600">满意度</p>
                                        <p class="text-2xl font-bold text-slate-800">94.2%</p>
                                        <p class="text-xs text-green-600">+2.1%</p>
                                    </div>
                                    <i class="fas fa-thumbs-up text-3xl text-purple-500"></i>
                                </div>
                            </div>
                        </div>

                        <!-- 使用趋势图 -->
                        <div class="setting-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                            <h3 class="text-lg font-semibold text-slate-800 mb-4">使用趋势</h3>
                            <div class="h-64">
                                <canvas id="usageChart"></canvas>
                            </div>
                        </div>

                        <!-- 详细统计 -->
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="setting-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                                <h3 class="text-lg font-semibold text-slate-800 mb-4">功能使用分布</h3>
                                <div class="h-48">
                                    <canvas id="featureChart"></canvas>
                                </div>
                            </div>
                            <div class="setting-card bg-white rounded-xl shadow-sm border border-slate-200 p-6">
                                <h3 class="text-lg font-semibold text-slate-800 mb-4">响应时间统计</h3>
                                <div class="space-y-3">
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-slate-600">平均响应时间</span>
                                        <span class="font-medium">1.2秒</span>
                                    </div>
                                    <div class="w-full bg-slate-200 rounded-full h-2">
                                        <div class="bg-green-500 h-2 rounded-full" style="width: 85%"></div>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-slate-600">最快响应</span>
                                        <span class="font-medium">0.3秒</span>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-slate-600">最慢响应</span>
                                        <span class="font-medium">3.8秒</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 头像上传模态框 -->
    <div id="avatarModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl p-6 w-96">
            <h3 class="text-lg font-semibold mb-4">更换头像</h3>
            <div class="upload-area p-8 rounded-lg text-center mb-4 border-2 border-dashed border-slate-300">
                <i class="fas fa-cloud-upload-alt text-4xl text-slate-400 mb-2"></i>
                <p class="text-slate-600">点击或拖拽图片到此处</p>
                <input type="file" id="avatarFileInput" class="hidden" accept="image/*">
            </div>
            <div class="flex justify-end space-x-2">
                <button onclick="closeAvatarModal()" class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">取消</button>
                <button onclick="uploadAvatar()" class="btn-primary px-4 py-2 text-white rounded-lg">确认</button>
            </div>
        </div>
    </div>

    <!-- 文档上传模态框 -->
    <div id="uploadModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
        <div class="bg-white rounded-xl p-6 w-96">
            <h3 class="text-lg font-semibold mb-4">上传文档</h3>
            <div class="upload-area p-8 rounded-lg text-center mb-4 border-2 border-dashed border-slate-300">
                <i class="fas fa-cloud-upload-alt text-4xl text-slate-400 mb-2"></i>
                <p class="text-slate-600">点击或拖拽文件到此处</p>
                <p class="text-xs text-slate-400 mt-1">支持 PDF, DOC, DOCX, TXT 等格式</p>
                <input type="file" id="documentFileInput" class="hidden" multiple accept=".pdf,.doc,.docx,.txt">
            </div>
            <div class="flex justify-end space-x-2">
                <button onclick="closeUploadModal()" class="px-4 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">取消</button>
                <button onclick="uploadDocuments()" class="btn-primary px-4 py-2 text-white rounded-lg">上传</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // 侧边栏折叠功能
        const sidebar = document.getElementById('sidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const fadeTexts = document.querySelectorAll('.fade-text');

        sidebarToggle.addEventListener('click', () => {
            const isCollapsed = sidebar.classList.contains('sidebar-collapsed');
            const barsIcon = sidebarToggle.querySelector('.fa-bars');
            const chevronIcon = sidebarToggle.querySelector('.fa-chevron-left');
            
            sidebar.classList.toggle('sidebar-collapsed');
            sidebar.classList.toggle('sidebar-expanded');
            
            // 切换图标显示
            if (isCollapsed) {
                barsIcon.classList.remove('hidden');
                chevronIcon.classList.add('hidden');
            } else {
                barsIcon.classList.add('hidden');
                chevronIcon.classList.remove('hidden');
            }
            
            setTimeout(() => {
                fadeTexts.forEach(text => {
                    if (sidebar.classList.contains('sidebar-collapsed')) {
                        text.classList.add('hidden');
                    } else {
                        text.classList.remove('hidden');
                    }
                });
            }, isCollapsed ? 0 : 200);
        });

        // 标签页切换
        const tabButtons = document.querySelectorAll('.tab-button');
        const tabContents = document.querySelectorAll('.tab-content');

        tabButtons.forEach(button => {
            button.addEventListener('click', () => {
                const targetTab = button.dataset.tab;
                
                tabButtons.forEach(btn => btn.classList.remove('active'));
                tabContents.forEach(content => content.classList.add('hidden'));
                
                button.classList.add('active');
                document.getElementById(targetTab + 'Tab').classList.remove('hidden');
                
                // 如果切换到统计页面，初始化图表
                if (targetTab === 'statistics') {
                    setTimeout(initCharts, 100);
                }
            });
        });

        // 头像上传
        const avatarUpload = document.querySelector('.avatar-upload');
        const avatarModal = document.getElementById('avatarModal');
        const avatarInput = document.getElementById('avatarInput');
        const avatarFileInput = document.getElementById('avatarFileInput');
        const avatarImage = document.getElementById('avatarImage');

        avatarUpload.addEventListener('click', () => {
            avatarModal.classList.remove('hidden');
        });

        avatarInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    avatarImage.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        });

        function closeAvatarModal() {
            avatarModal.classList.add('hidden');
        }

        function uploadAvatar() {
            const file = avatarFileInput.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    avatarImage.src = e.target.result;
                    closeAvatarModal();
                    showToast('头像更新成功！', 'success');
                };
                reader.readAsDataURL(file);
            }
        }

        // 密码可见性切换
        function togglePasswordVisibility(inputId) {
            const input = document.getElementById(inputId);
            const button = input.nextElementSibling;
            const icon = button.querySelector('i');
            
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }

        // 密码强度检测
        function checkPasswordStrength() {
            const password = document.getElementById('newPassword').value;
            const strengthBar = document.getElementById('passwordStrengthBar');
            const strengthText = document.getElementById('passwordStrengthText');
            
            let strength = 0;
            if (password.length >= 8) strength++;
            if (password.match(/[a-z]/) && password.match(/[A-Z]/)) strength++;
            if (password.match(/[0-9]/)) strength++;
            if (password.match(/[^a-zA-Z0-9]/)) strength++;
            
            strengthBar.className = 'password-strength';
            
            if (password.length === 0) {
                strengthText.textContent = '密码强度：未输入';
                strengthBar.style.width = '0';
            } else if (strength < 2) {
                strengthBar.classList.add('strength-weak');
                strengthText.textContent = '密码强度：弱';
            } else if (strength < 3) {
                strengthBar.classList.add('strength-medium');
                strengthText.textContent = '密码强度：中等';
            } else {
                strengthBar.classList.add('strength-strong');
                strengthText.textContent = '密码强度：强';
            }
        }

        // 更新密码
        function updatePassword() {
            const currentPassword = document.getElementById('currentPassword').value;
            const newPassword = document.getElementById('newPassword').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            
            if (!currentPassword || !newPassword || !confirmPassword) {
                showToast('请填写所有密码字段', 'error');
                return;
            }
            
            if (newPassword !== confirmPassword) {
                showToast('新密码与确认密码不匹配', 'error');
                return;
            }
            
            if (newPassword.length < 6) {
                showToast('密码长度不能少于6位', 'error');
                return;
            }
            
            // 模拟密码更新
            setTimeout(() => {
                showToast('密码更新成功！', 'success');
                document.getElementById('currentPassword').value = '';
                document.getElementById('newPassword').value = '';
                document.getElementById('confirmPassword').value = '';
                document.getElementById('passwordStrengthBar').className = 'password-strength';
                document.getElementById('passwordStrengthText').textContent = '密码强度：未输入';
            }, 1000);
        }

        // 开关切换
        function toggleSwitch(element) {
            element.classList.toggle('active');
        }

        // 文档上传
        function showUploadModal() {
            document.getElementById('uploadModal').classList.remove('hidden');
        }

        function closeUploadModal() {
            document.getElementById('uploadModal').classList.add('hidden');
        }

        function uploadDocuments() {
            const files = document.getElementById('documentFileInput').files;
            if (files.length > 0) {
                showToast(`正在上传 ${files.length} 个文件...`, 'info');
                setTimeout(() => {
                    closeUploadModal();
                    showToast('文件上传成功！', 'success');
                }, 2000);
            }
        }

        // Toast 提示
        function showToast(message, type = 'info') {
            const toast = document.createElement('div');
            toast.className = `toast p-4 rounded-lg shadow-lg ${
                type === 'success' ? 'bg-green-500 text-white' :
                type === 'error' ? 'bg-red-500 text-white' :
                'bg-blue-500 text-white'
            }`;
            toast.innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fas ${
                        type === 'success' ? 'fa-check-circle' :
                        type === 'error' ? 'fa-exclamation-circle' :
                        'fa-info-circle'
                    }"></i>
                    <span>${message}</span>
                </div>
            `;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 3000);
        }

        // 初始化图表
        function initCharts() {
            // 使用趋势图
            const usageCtx = document.getElementById('usageChart');
            if (usageCtx) {
                new Chart(usageCtx, {
                    type: 'line',
                    data: {
                        labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                        datasets: [{
                            label: '对话次数',
                            data: [120, 190, 300, 500, 200, 300],
                            borderColor: 'rgb(99, 102, 241)',
                            backgroundColor: 'rgba(99, 102, 241, 0.1)',
                            tension: 0.4
                        }, {
                            label: 'Token使用量(K)',
                            data: [30, 45, 60, 80, 35, 45],
                            borderColor: 'rgb(34, 197, 94)',
                            backgroundColor: 'rgba(34, 197, 94, 0.1)',
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'top',
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }

            // 功能使用分布图
            const featureCtx = document.getElementById('featureChart');
            if (featureCtx) {
                new Chart(featureCtx, {
                    type: 'doughnut',
                    data: {
                        labels: ['数据问答', '知识问答', '代码审查', '图片分析', '其他'],
                        datasets: [{
                            data: [35, 25, 20, 15, 5],
                            backgroundColor: [
                                'rgb(99, 102, 241)',
                                'rgb(34, 197, 94)',
                                'rgb(251, 146, 60)',
                                'rgb(168, 85, 247)',
                                'rgb(107, 114, 128)'
                            ]
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom',
                            }
                        }
                    }
                });
            }
        }

        // 拖拽上传功能
        const uploadAreas = document.querySelectorAll('.upload-area');
        uploadAreas.forEach(area => {
            area.addEventListener('dragover', (e) => {
                e.preventDefault();
                area.classList.add('dragover');
            });

            area.addEventListener('dragleave', () => {
                area.classList.remove('dragover');
            });

            area.addEventListener('drop', (e) => {
                e.preventDefault();
                area.classList.remove('dragover');
                const files = e.dataTransfer.files;
                console.log('拖拽的文件：', files);
            });

            area.addEventListener('click', () => {
                const input = area.parentElement.querySelector('input[type="file"]');
                if (input) input.click();
            });
        });

        // 页面加载完成后的初始化
        window.addEventListener('load', () => {
            // 默认显示账户设置
            document.querySelector('[data-tab="account"]').click();
        });
    </script>
</body>
</html>